<template>
  <div class="mainpg">
    <div class="main_spac1" style="padding-bottom:5px;">
      <div class="main_white padding10">
        <div class="mainor_form">
          <div class="mainor_te">
            <router-link to="/commodity/pricing/record" class="mainor_tea">操作记录</router-link>
            <el-button @click="dialogFormVisible = true">表头设置</el-button>
          </div>
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="60px"
          >
            <el-form-item label="名称" prop="name">
              <el-input v-model.trim="form.name" placeholder="名称" clearable class="wid180"></el-input>
            </el-form-item>
            <el-form-item label="分类" prop="category_id" class="wid180">
              <el-cascader v-model="form.category_id" :options="options" :props="defaultProps"></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="$refs['userListFrom'].resetFields()"
              >重置</el-button>
              <el-button type="primary" @click="getArticleList" :loading="listLoading">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="main_table" style="min-height:670px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list.list.data"
            element-loading-text="加载中"
            fit
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" />
            <div v-for="(field,index) in list.field" :key="index">
              <el-table-column
                label="商品名称"
                width="140"
                prop="spu_name.title"
                v-if="field==1"
                :show-overflow-tooltip="true"
              >
                <template
                  slot-scope="scope"
                >{{ scope.row.goods.name }} 【{{ scope.row.spu_name.title }}】</template>
              </el-table-column>
              <el-table-column
                label="采购价"
                width="160"
                :render-header="renderHeader_purchase"
                :show-overflow-tooltip="true"
                v-if="field==2"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <div class="mainus_pe">
                    <div v-if="!scope.row.freight_cg">
                      {{ scope.row.purchase_price }}
                      <svg
                        aria-hidden="true"
                        class="main_page_svg"
                        width="13"
                        height="13"
                        @click="freighta(scope.$index,'freight_cg')"
                      >
                        <use xlink:href="#icon-commodity_modify" />
                      </svg>
                    </div>
                    <div v-else class="boxnr">
                      <el-input
                        v-model="scope.row.purchase_price"
                        placeholder="采购价"
                        class="wid80"
                      ></el-input>
                      <div class="boxnr">
                        <svg
                          aria-hidden="true"
                          class="main_page_svg marginLeft10"
                          width="20"
                          height="20"
                          @click="inputBlur(scope.row.purchase_price,scope.$index,'freight_cg','purchase_price')"
                        >
                          <use xlink:href="#icon-index_tick" />
                        </svg>
                        <svg
                          aria-hidden="true"
                          class="main_page_svg marginLeft10"
                          width="12"
                          height="12"
                          @click="scope.row.purchase_price=scope.row.purchase_price_data,scope.row.freight_cg=false"
                        >
                          <use xlink:href="#icon-index_cross" />
                        </svg>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="市场价"
                width="160"
                :show-overflow-tooltip="true"
                v-if="field==3"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <div class="mainus_pe">
                    <div v-if="!scope.row.freight_jc">
                      {{ scope.row.market_price }}
                      <svg
                        aria-hidden="true"
                        class="main_page_svg"
                        width="13"
                        height="13"
                        @click="freighta(scope.$index,'freight_jc')"
                      >
                        <use xlink:href="#icon-commodity_modify" />
                      </svg>
                    </div>
                    <div v-else class="boxnr">
                      <el-input
                        v-model="scope.row.market_price"
                        placeholder="市场价"
                        class="wid80"
                      ></el-input>
                      <div class="boxnr">
                        <svg
                          aria-hidden="true"
                          class="main_page_svg marginLeft10"
                          width="20"
                          height="20"
                          @click="inputBlur(scope.row.market_price,scope.$index,'freight_jc','market_price')"
                        >
                          <use xlink:href="#icon-index_tick" />
                        </svg>
                        <svg
                          aria-hidden="true"
                          class="main_page_svg marginLeft10"
                          width="12"
                          height="12"
                          @click="scope.row.market_price=scope.row.market_price_data,scope.row.freight_jc=false"
                        >
                          <use xlink:href="#icon-index_cross" />
                        </svg>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="时价"
                width="120"
                :show-overflow-tooltip="true"
                class-name="main_hei renderHeader_current"
                v-if="field==4"
              >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.current_price"
                    @change="((val)=>{elswitch(val,scope.row.id,'current_price')})"
                    active-color="#03A98E"
                    active-text="开"
                    inactive-text="关"
                    class="mainor_switch"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column
                label="首页推荐"
                width="120"
                :show-overflow-tooltip="true"
                class-name="main_hei"
                v-if="field==5"
              >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.goods.is_recommend"
                    @change="((val)=>{elswitch(val,scope.row.goods_id,'is_recommend')})"
                    active-color="#03A98E"
                    active-text="开"
                    inactive-text="关"
                    class="mainor_switch"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column
                label="上架状态"
                :show-overflow-tooltip="true"
                :render-header="renderHeader_status"
                class-name="main_hei"
                width="140"
                v-if="field==6"
              >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    @change="((val)=>{elswitch(val,scope.row.id,'status')})"
                    active-color="#03A98E"
                    active-text="开"
                    inactive-text="关"
                    class="mainor_switch"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column
                label="排序"
                width="120"
                prop="goods.sort"
                :show-overflow-tooltip="true"
                class-name="main_hei"
                v-if="field==7"
              />
              <el-table-column
                label="起定量"
                width="120"
                prop="minimum"
                :show-overflow-tooltip="true"
                class-name="main_hei"
                v-if="field==8"
              />
              <el-table-column
                label="损耗率"
                width="120"
                prop="attrition_rate"
                :show-overflow-tooltip="true"
                class-name="main_hei"
                v-if="field==9"
              />
              <el-table-column
                label="指定库存"
                width="120"
                prop="designated_inventory"
                :show-overflow-tooltip="true"
                class-name="main_hei"
                v-if="field==10"
              />
              <el-table-column
                label="分拣转换"
                width="120"
                :show-overflow-tooltip="true"
                :render-header="renderHeader_trans"
                class-name="main_hei"
                v-if="field==11"
              >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.is_transfer"
                    @change="((val)=>{elswitch(val,scope.row.id,'is_transfer')})"
                    active-color="#03A98E"
                    active-text="开"
                    inactive-text="关"
                    class="mainor_switch"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column
                label="小数加购"
                width="120"
                :show-overflow-tooltip="true"
                :render-header="renderHeader_float"
                class-name="main_hei"
                v-if="field==12"
              >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.is_float"
                    @change="((val)=>{elswitch(val,scope.row.id,'is_float')})"
                    active-color="#03A98E"
                    active-text="开"
                    inactive-text="关"
                    class="mainor_switch"
                  ></el-switch>
                </template>
              </el-table-column>
            </div>
            <el-table-column
              label="管理操作"
              align="center"
              fixed="right"
              width="150"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                <router-link :to="'/commodity/pricing/edit/'+scope.row.id">
                  <el-link type="primary">编辑</el-link>
                </router-link>
                <el-link type="danger" @click="delet(scope.$index,scope.row.id)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>

        <el-dialog
          title="表头设置"
          :visible.sync="dialogFormVisible"
          class="main_dialog dialog500"
          @close="type = list.field"
        >
          <el-checkbox-group v-model="type">
            <el-checkbox
              v-for="(Header,index) in Header"
              :key="index"
              :label="Header.id"
              :disabled="Header.disabled"
            >{{ Header.name }}</el-checkbox>
          </el-checkbox-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="setupmine" v-repeatClick>确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  sku_index,
  goods_delete,
  sku_changeStatus,
  goods_changeStatus,
  sku_changeField,
  sku_batchStatus,
} from "@/api/commodity/commodity_Pricing";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { field_save } from "@/api/currency";
import { recursion, category } from "@/utils/index";

export default {
  directives: {
    // 聚焦元素
    focus: {
      inserted(el) {
        el.querySelector("input").focus();
      },
    },
  },
  data() {
    return {
      // 搜索
      form: {
        name: "",
        pid: "",
        category_id: [],
      },
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 列表数据
      list: {
        list: {
          data: [],
        },
      },
      listLoading: false,
      // 表头设置
      dialogFormVisible: false,
      type: [],
      Header: [
        {
          id: 1,
          name: "商品名称",
          disabled: true,
        },
        {
          id: 2,
          name: "采购价",
          disabled: true,
        },
        {
          id: 3,
          name: "市场价",
          disabled: true,
        },
        {
          id: 4,
          name: "时价",
          disabled: true,
        },
        {
          id: 5,
          name: "首页推荐",
          disabled: true,
        },
        {
          id: 6,
          name: "上架状态",
          disabled: true,
        },
        {
          id: 7,
          name: "排序",
          disabled: false,
        },
        {
          id: 8,
          name: "起定量",
          disabled: false,
        },
        {
          id: 9,
          name: "损耗率",
          disabled: false,
        },
        {
          id: 10,
          name: "指定库存",
          disabled: false,
        },
        {
          id: 11,
          name: "分拣转换",
          disabled: false,
        },
        {
          id: 12,
          name: "小数加购",
          disabled: false,
        },
      ],
      // 分类
      options: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
      // 全选
      selectArr: [],
      // 焦点
      offsetParent: true,
    };
  },
  // 刷新
  inject: ["reload"],
  methods: {
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map((item) => {
        this.selectArr.push({ id: item.id });
      });
    },
    // 采购价 ？注释
    renderHeader_purchase(h, { column, $index }) {
      // 这里在最外层插入一个div标签
      return h("div", [
        // h即为cerateElement的简写
        // 在div里面插入span
        h("span", {
          // 表示内容
          domProps: {
            innerHTML: column.label,
          },
          on: {
            click: () => {
              console.log(`${column.label}   ${$index}`);
            },
          },
        }),
        h(
          "el-tooltip",
          {
            // 表示属性
            attrs: {
              effect: "dark",
              content: "当日采购价！",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
    // 库存价 ？注释
    renderHeader_inventory(h, { column, $index }) {
      // 这里在最外层插入一个div标签
      return h("div", [
        // h即为cerateElement的简写
        // 在div里面插入span
        h("span", {
          // 表示内容
          domProps: {
            innerHTML: column.label,
          },
          on: {
            click: () => {
              console.log(`${column.label}   ${$index}`);
            },
          },
        }),
        h(
          "el-tooltip",
          {
            // 表示属性
            attrs: {
              effect: "dark",
              content:
                "入库时根据当日的采购价和入库数量与当前库存价和库存数量进行加权平均计算得来！",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
    // 时价？注释
    renderHeader_current(h, { column, $index }) {
      // 这里在最外层插入一个div标签
      return h(
        "div",
        {
          class: "boxnr",
        },
        [
          // h即为cerateElement的简写
          // 在div里面插入span
          h(
            "div",
            {
              class: "maincl_px",
              style: "margin-right: 5px;",
            },
            [
              h("em", {
                style: this.selectArr.length != 0 ? "" : "display:none;",
                class: "maincl_pxe",
                // 表示内容
                domProps: {
                  innerHTML:
                    '<svg aria-hidden="true" width="12" height="12" > <use xlink:href="#icon-commodity_open" /></svg>',
                },
                on: {
                  click: () => {
                    this.check(
                      "确定为选中商品批量开启时价吗？",
                      1,
                      "current_price"
                    );
                    // console.log(`${column.label}   ${$index}`);
                  },
                },
              }),
              h("em", {
                style:
                  this.selectArr.length != 0 ? "top:-2px;" : "display:none;",
                class: "maincl_pxe",
                // 表示内容
                domProps: {
                  innerHTML:
                    '<svg aria-hidden="true" width="12" height="12" > <use xlink:href="#icon-commodity_close" /></svg>',
                },
                on: {
                  click: () => {
                    this.check(
                      "确定为选中商品批量关闭时价吗？",
                      0,
                      "current_price"
                    );
                    // console.log(`${column.label}   ${$index}`);
                  },
                },
              }),
            ]
          ),
          h("span", {
            // 表示内容
            domProps: {
              innerHTML: column.label,
            },
            on: {
              click: () => {
                console.log(`${column.label}   ${$index}`);
              },
            },
          }),
          h(
            "el-tooltip",
            {
              // 表示属性
              attrs: {
                effect: "dark",
                content: "开启后，移动端就不会显示价格而是以“时价”两字代替！",
                placement: "top",
              },
            },
            [
              h("i", {
                style: "margin-left: 5px;margin-top:-1px;",
                class: "el-icon-question table-msg",
              }),
            ]
          ),
        ]
      );
    },
    // 上架状态？注释
    renderHeader_status(h, { column, $index }) {
      // 这里在最外层插入一个div标签
      return h(
        "div",
        {
          class: "boxnr",
        },
        [
          // h即为cerateElement的简写
          // 在div里面插入span
          h(
            "div",
            {
              class: "maincl_px",
              style: "margin-right: 5px;",
            },
            [
              h("em", {
                style: this.selectArr.length != 0 ? "" : "display:none;",
                class: "maincl_pxe",
                // 表示内容
                domProps: {
                  innerHTML:
                    '<svg aria-hidden="true" width="12" height="12" > <use xlink:href="#icon-commodity_open" /></svg>',
                },
                on: {
                  click: () => {
                    this.check("确定选中商品批量【上架】吗？", 1, "status");
                    // console.log(`${column.label}   ${$index}`);
                  },
                },
              }),
              h("em", {
                style:
                  this.selectArr.length != 0 ? "top:-2px;" : "display:none;",
                class: "maincl_pxe",
                // 表示内容
                domProps: {
                  innerHTML:
                    '<svg aria-hidden="true" width="12" height="12" > <use xlink:href="#icon-commodity_close" /></svg>',
                },
                on: {
                  click: () => {
                    this.check("确定选中商品批量【下架】吗？", 0, "status");
                    // console.log(`${column.label}   ${$index}`);
                  },
                },
              }),
            ]
          ),
          h("span", {
            // 表示内容
            domProps: {
              innerHTML: column.label,
            },
            on: {
              click: () => {
                console.log(`${column.label}   ${$index}`);
              },
            },
          }),
        ]
      );
    },
    // 分拣转换 ？注释
    renderHeader_trans(h, { column, $index }) {
      // 这里在最外层插入一个div标签
      return h("div", [
        // h即为cerateElement的简写
        // 在div里面插入span
        h("span", {
          // 表示内容
          domProps: {
            innerHTML: column.label,
          },
          on: {
            click: () => {
              console.log(`${column.label}   ${$index}`);
            },
          },
        }),
        h(
          "el-tooltip",
          {
            // 表示属性
            attrs: {
              effect: "dark",
              content:
                "只适用规格，一旦开启在分拣时会自动用分拣量/转换率，得到最终的分拣量，如：客户下了2个3斤装的白菜，像蔬菜一般都是散装，分拣时只会把散装的白菜放到称上分拣，到差不多6斤时就保存，这时系统会自动用6/3得到最终的分拣量！",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
    // 小数加购 ？注释
    renderHeader_float(h, { column, $index }) {
      // 这里在最外层插入一个div标签
      return h("div", [
        // h即为cerateElement的简写
        // 在div里面插入span
        h("span", {
          // 表示内容
          domProps: {
            innerHTML: column.label,
          },
          on: {
            click: () => {
              console.log(`${column.label}   ${$index}`);
            },
          },
        }),
        h(
          "el-tooltip",
          {
            // 表示属性
            attrs: {
              effect: "dark",
              content:
                "开启后，移动端在使用键盘输入数量加入购物车时，就不能选择小数点！",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
    // 批量弹窗
    check(name, type, pd) {
      this.$confirm(name, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (pd == "current_price") {
            // this.batch(type)
          } else {
            this.batch(type);
          }
        })
        .catch(() => {});
    },
    // 批量处理
    batch(type) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { status: type })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { ids: JSON.stringify(this.selectArr), status: type }
      );
      sku_batchStatus(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "批量处理成功",
            type: "success",
          });
          this.$refs.multipleTable.clearSelection();
          this.sku_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 点击排序
    freighta(index, name) {
      if (this.offsetParent) {
        this.list.list.data[index][name] = !this.list.list.data[index][name];
      }
    },
    // 焦点离开排序
    inputBlur(val, index, name, type) {
      this.offsetParent = false;
      if (
        /^(\d+\.?)?\d{0,2}$/.test(parseFloat(val)) &&
        val != ""
      ) {
        this.list.list.data[index][name] = !this.list.list.data[index][name];
        this.offsetParent = true;
        this.goods_change(
          val,
          this.list.list.data[index].id,
          type
        );
      }
    },
    // 查看价格开关
    elswitch(val, id, type) {
      if (type == "status") {
        this.sku_changeStatus(val ? 1 : 0, id);
      } else {
        this.goods_change(val ? 1 : 0, id, type);
      }
    },
    // 上架状态开关切换
    sku_changeStatus(val, id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: id, status: val })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id, status: val }
      );
      sku_changeStatus(data).then((res) => {
        // this.sku_index();
        if (res.errcode == 0) {
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 其他开关切换
    goods_change(val, id, type) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { id: id, type: type, value: val })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id, type: type, value: val }
      );
      if (type == "is_recommend") {
        goods_changeStatus(data).then((res) => {
          // this.sku_index();
          if (res.errcode == 0) {
          } else {
            this.$message.error(res.errmsg);
          }
        });
      } else {
        sku_changeField(data).then((res) => {
          // this.sku_index();
          if (res.errcode == 0) {
          } else {
            this.$message.error(res.errmsg);
          }
        });
      }
    },
    // 设置确认
    setupmine(val) {
      let arry = [];
      this.Header.map((e) => {
        this.type.map((p) => {
          if (e.id == p) {
            arry.push(e.id);
            return;
          }
        });
      });
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { type: 2 })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: 2, fields: JSON.stringify(arry) }
        // [1,2,3,4,5,6,7,8,9,10,11,12,13]
      );
      field_save(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.reload();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.sku_index();
    },
    changePage(page) {
      this.current.page = page;
      this.sku_index();
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.sku_index();
    },
    // 删除
    delet(index, id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: id, type: 2 })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id, type: 2 }
      );
      this.$confirm("是否删除SKU?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          goods_delete(data).then((res) => {
            if (res.errcode == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.list.list.data.splice(index, 1);
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    // 列表
    sku_index() {
      this.listLoading = true;
      let form = JSON.parse(JSON.stringify(this.form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, form, this.current)) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form,
        this.current
      );
      sku_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.options = recursion(res.data.categoryList, true);
          res.data.list.data.map((e) => {
            e.market_price_data=e.market_price
            e.purchase_price_data=e.purchase_price
            e.freight_cg = false;
            e.freight_kc = false;
            e.freight_jc = false;
            e.is_float = e.is_float == 0 ? false : true;
            e.status = e.status == 0 ? false : true;
            e.current_price = e.current_price == 0 ? false : true;
            e.is_transfer = e.is_transfer == 0 ? false : true;
            e.goods.is_recommend = e.goods.is_recommend == 0 ? false : true;
          });
          this.type = res.data.field;
          this.list = res.data;
          this.totalCount = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
  activated() {
    // 列表
    this.sku_index();
  },
};
</script>
<style lang="scss" scoped>
.mainor_form form {
  width: calc(100% - 180px);
}
</style>
